<template>
	<view>
		<view v-for="(item,index) in data.data" :key="index" class="box">
			<view class="row">
				<view class="title">{{item.order_no}}</view>
				<view class="price">￥{{item.money}}</view>
			</view>
			<view class="row">
				<text>支付方式：</text><text>{{item.pay_type}}</text>
			</view>
			<view class="row">
				<text>充值类型：</text><text>{{item.buy_type}}</text>
			</view>
			<view class="row">
				<text>创建时间：</text><text>{{item.created_at}}</text>
			</view>
			<view class="row">
				<text>充值状态：</text><text :class="item.status=='成功' ? 'green' : (item.status=='失败' ? 'grey' : '')">{{item.status}}</text>
			</view>
			<view class="row" v-if="item.status == '充值中'">
				<view></view>
				<view>
					<button type="default" size="mini" @click="goRecharge(item.order_no,item.paytype)">去充值</button>
				</view>
			</view>
		</view>
		
		<view style="padding: 40rpx;">
			<uni-pagination
					:total="data.total" 
					:current="data.current_page"
					:pageSize="data.per_page"
					@change="changePage"></uni-pagination>
		</view>
	</view>
</template>

<script>
	import {uniPagination} from "../../components/uni-pagination/uni-pagination.vue";
	export default {
		components: {uniPagination},
		data() {
			return {
				data:{},
				page:1,
				pagination:{}
			}
		},
		onLoad(){
			
		},
		onShow() {
			this.loadList();
		},
		methods: {
			loadList(){
				uni.showLoading({
					title:"载入中"
				});
				this.request.get({
					url:"index/member/rechargelist?page="+this.page,
					success:(res)=>{
						uni.hideLoading();
						if(res.statusCode != 200){
							uni.showToast({
								icon:"none",
								title:"请求错误，请稍候再试"
							});
							return;
						}
						this.data = res.data.data;
					},
					fail:()=>{
						uni.hideLoading();
					}
				});
			},
			goRecharge(order_no,paytype){
				uni.navigateTo({
					url:"../buy/gobuy?order_no="+order_no+"&payt="+paytype
				})
			},
			changePage(e){
				this.page = e.current;
				this.loadList();
			}
		}
	}
</script>

<style scoped>
.box{
	border-bottom: #D3D3D3 1px solid;
	margin: 20rpx 40rpx;
	padding: 20rpx 0rpx;
}
.box .row{
	display: flex;
	justify-content: space-between;
	padding: 10rpx 0rpx;
	font-size: 30rpx;
}
.box .row .title{
	font-weight: bold;
}
.box .row .price{
	color: #FF6759;
	font-weight: bold;
}
.green{
	color: #28A745;
}
.grey{
	color: #9B9EA3;
}
</style>
